<template>
  <div>
    <div class="wrapper" v-if="type === 'goodsDetail'">
      <div class="wr-l">
        <Icon size="23" type="ios-alarm-outline" /> {{ isSpecial ? '每周特价' : $t("lightningDeals") }}
      </div>
      <div class="count-down" v-if="end === ''">
        <p>{{ $t("countdown") }}：</p>
        <span>{{ hours }}</span
        ><span>{{ minutes }}</span
        ><span>{{ seconds }}</span>
      </div>
      <div v-else>{{ end }}</div>
    </div>
    <span v-else class="cart-promotion">
      <span v-if="end === ''"
        >{{ $t("uteo") }}：<span>{{ hours }}</span> :
        <span>{{ minutes }}</span> : <span>{{ seconds }}</span></span
      >
      <span v-else>{{ $t("tehe") }}</span>
    </span>
  </div>
</template>
<script>
export default {
  props: {
    time: {
      // 传入的初始时间
      default: 1718977559428,
    },
    type: {
      // 区分是在详情还是购物车调用
      default: "goodsDetail", // 设置两个值，goodsDetail和cart，样式不同
      type: String,
    },
    isSpecial: {
      type: Boolean
    },
  },
  data() {
    return {
      end: "", // 结束状态
      hours: "", // 小时
      minutes: "", // 分钟
      seconds: "", // 秒
      interval: "", // 定时器
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    countDown(val) {
      // 倒计时方法
      function addZero(i) {
        return i < 10 ? "0" + i : i + "";
      }
      var nowtime = new Date();
      var endtime = new Date(val);
      var lefttime = parseInt((endtime.getTime() - nowtime.getTime()) / 1000);
      var h = parseInt((lefttime / (60 * 60)) % 24);
      var m = parseInt((lefttime / 60) % 60);
      var s = parseInt(lefttime % 60);
      h = addZero(h);
      m = addZero(m);
      s = addZero(s);
      this.hours = h;
      this.minutes = m;
      this.seconds = s;
      if (lefttime <= 0) {
        this.end = this.$t("tehe");
        clearInterval(this.interval);
      }
    },
    init() {
      // 初始化
      this.interval = setInterval(() => {
        this.countDown(this.time);
      }, 1000);
    },
  },
};
</script>
<style scoped lang="scss">
.cart-promotion {
  font-size: 13px;
  color: #999;
  margin-left: 10px;
}
.wrapper {
  background-image: linear-gradient(266deg, #ff0b33, #ff4257, #ff5f7c, #fa78a2);
  height: 32px;
  color: #fff;
  line-height: 32px;
  font-size: 16px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wr-r {
  font-size: 13px;
}
.count-down {
  margin-right: -20px;
  p {
    float: left;
    line-height: 20px;
  }
  > span {
    position: relative;
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    background-color: #2f3430;
    margin-right: 20px;
    color: white;
    font-size: 14px;
    line-height: 20px;
    &::after {
      content: ":";
      display: block;
      position: absolute;
      right: -20px;
      font-weight: bolder;
      font-size: 14px;
      width: 20px;
      height: 100%;
      top: 0;
    }
  }
  > span:last-child::after {
    content: "";
  }
}
</style>
